import { defineStore } from 'pinia'
import { ref } from 'vue'
import { ThemeColors, type ThemeType } from '~/types'

export const useSystemStore = defineStore('system', () => {
  const primaryKey = ref('id')
  const collapsed = ref(true)
  const color = ref(ThemeColors.Light)
  const border = ref(ThemeColors.BorderLight)
  const selectedTable = ref('')

  const toggleCollapse = () => {
    collapsed.value = !collapsed.value
  }

  const setCollapse = (state: boolean) => {
    collapsed.value = state
  }

  
  const setPrimaryKey = (key: string) => {
    primaryKey.value = key
  }

  const setColor = (theme: ThemeType) => {
    if (theme === 'dark') {
      color.value = ThemeColors.Light
    } else {
      color.value = ThemeColors.Dark
    }
    setBorder(theme)
  }

  const setBorder = (theme: ThemeType) => {
    if (theme === 'dark') {
      border.value = ThemeColors.BorderLight
    } else {
      border.value = ThemeColors.BorderDark
    }
  }

  const setSelectedTable = (table: string) => {
    selectedTable.value = table
  }

  const excludeKeys = computed(() => {
    return ['used', 'createdAt', 'updatedAt', primaryKey.value]
  })

  return {
    collapsed,
    color,
    border,
    selectedTable,
    primaryKey,
    excludeKeys,
    setPrimaryKey,
    toggleCollapse,
    setCollapse,
    setColor,
    setBorder,
    setSelectedTable
  }
})
